<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>打卡数据可视化</title>
    <link rel="stylesheet" href="../static/css/stu.css">
</head>
<body>

<div class="wrapper">
    <div id="web_bg" style="background-image: url(../static/img/bg.jpg);"></div>
</div>
    <div style="top:3%;left:18%;position: absolute;color:chocolate;">
        <img src="../static/img/title-left.png">
    </div>
    <div style="top:3%;left:58%;position: absolute;color:chocolate;">
        <img src="../static/img/title-right.png">
    </div>
    <div style="top:0%;left:39%;position: absolute;color:chocolate;">
        <h1>假期打卡数据可视化</h1>
    </div>
    <div id="mid" ></div>
    <div id="right1"></div>
    <div id="right2"></div>
    <div id="left3"></div>
    <div id="left1"></div>

    <div style="position:absolute;bottom:81%;left:12%;width:75%">
        <div id="stuSignInData2017" style="top:17%;left:32%;position: absolute;color:chocolate;"></div>
        <div id="stuSignInData2018" style="top:17%;left:46.5%;position: absolute;color:chocolate;"></div>
        <div id="stuSignInData2019" style="top:17%;left:60%;position: absolute;color:chocolate;"></div>
    </div>


    <div style="position:absolute;bottom:77%;left:10%;width:75%">
        <div style="top:24%;left:31%;position: absolute;color:aqua;">
            <h3>2017级打卡人数</h3>
        </div>
        <div style="top:24%;left:45.5%;position: absolute;color:aqua;">
            <h3>2018级打卡人数</h3>
        </div>
        <div style="top:24%;left:60%;position: absolute;color:aqua;">
            <h3>2019级打卡人数</h3>
        </div>
    </div>

	<!--此处导入的js是echarts显示图表必需的依赖-->
	<script src="../static/js/jquery.min.js"></script>
    <script src="../static/js/echarts.min.js"></script>
    <!--此处导入的js是绘制地图所需的依赖-->
    <script src="../static/js/china.js"></script>
    <script src="../static/js/echarts-gl.min.js"></script>
    <!--此处导入的js是主题-->
	<script src="../static/js/macarons.js"></script>
    <!--导入自己的脚本-->
    <script src="../static/js/checkin.js"></script>
</body>
</html>